<template>
  <div class="wrapper">
    <div class="my-inbox" ref="box" @click.prevent="">
      <div
        class="item"
        v-for="(item, index) in props.menuItems"
        :key="index"
        :id="index"
        :class="[index == currentIndex? 'active':'',  item.dis? 'dis': '']"
        @click.prevent="clickMenuItem(index, item, $event)"
      >
        {{ item.name }}
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, onMounted, watch, reactive, toRefs } from 'vue';
let currentIndex = ref(0);
let box = ref(null);
let props = defineProps<{
  defaultIndex: any,
  menuItems: any,
  parenId: any
}>()

let { parenId, defaultIndex } = toRefs(props)
let emit = defineEmits(['clickLzMenuItem'])
// watch(defaultIndex, () => {
//   console.log('----defaultIndex', defaultIndex.value)
// })

let clickMenuItem = (idx, item, event) => {
  // console.log('---clickMenuItem', idx, item)
  // console.log('---props-', props.menuItems, parenId, defaultIndex)
  // console.log('---box', box, box.value.clientWidth)
  if(item.dis) {
    return
  }
  // 点击事件传递给调用者
  currentIndex.value = idx;
  let newObj = {
    ...props.menuItems[idx],
    key: idx,
    parenId: parenId || 0
  }
  // console.log('----newObj', newObj)
  emit("clickLzMenuItem", newObj);

  //滚动 到中间
  let e = event.target;
  let left = e.offsetLeft - box.clientWidth / 2 + e.offsetWidth / 2;
  box.value.scrollLeft = left;
}

</script>
<style lang="scss" scoped>
.wrapper {
  width: 100%;
  height: 40px;
  overflow: hidden;
  .my-inbox {
    width: 100%;
    height: 50px;
    white-space: nowrap;
    overflow-y: hidden;
    overflow-x: scroll;
    text-align: left;
    .item {
      display: inline-block;
      height: 26px;
      background: #F3F6FF;
      border-radius: 13px;
      border: 1px solid #4B7AFF;
      padding: 0 10px;
      font-size: 14px;
      color: #4B7AFF;
      line-height: 26px;
      margin-right: 13px;
      font-weight: 600;
      position: relative;
      &.dis{
        background: #E4EBFF;
        border-color:  #E4EBFF;
        color: rgba(34, 34, 34, 0.8);
        &:after{
          display: none;
        }
      }
    }
    .active {
      background: #4B7AFF;
      color: #fff;
      border-color:#4B7AFF ;
      &:after{
        content: '';
        position: absolute;
        bottom: -5px;
        right: 18px;
        display: block;
        background: url("../assets/images/icon/sanjiao.png") no-repeat;
        background-size: 10px 5px;
        width: 10px;
        height: 5px;
      }
    }
  }
}
.tabtwo{
  .my-inbox{
    .item{
      border: none;
      color: #3654A9;
    }
    .active {
      color: #fff;
      &:after{
        display: none;
      }
    }
  }
}
</style>
